import { FC } from 'react'
import QuestionCard from '@/components/QuestionCard'
import styles from './common.module.scss'
import { Empty, Typography, Spin } from 'antd'
import ListSearch from '@/components/ListSearch'
import useLoadQuestionListData from '@/hooks/useLoadQuestionListData'
import ListPagination from '@/components/ListPagination'

const { Title } = Typography

const Star: FC = () => {
  const { data, loading } = useLoadQuestionListData({ isStar: true })
  return (
    <div className={styles['List']}>
      <Title level={3} className={styles['List-header']}>
        <div className={styles.left}>星标问卷</div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </Title>
      <div className={styles['List-content']}>
        {!loading ? (
          data.list.length > 0 ? (
            data.list.map((item: any) => {
              return <QuestionCard key={item._id} {...item} />
            })
          ) : (
            <Empty description="暂无数据" />
          )
        ) : (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
      </div>
      {!loading && <ListPagination total={data.total} />}
    </div>
  )
}

export default Star
